<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>Document</title>
</head>

<style>

    .container-fluid{
        padding-right: 0px !important;
    }
    .row{
        margin-right: 0px;
    }

    .line,.bar{
        /* float: left; */
        height: 300px;
        margin-bottom: 30px;
       
        background-color: rgb(221, 222, 228);
    }
    .line1,.line2,.line3,.bar1,.bar2,.bar3{
        width: 100%;
        height: 100%;
        background-color: rgb(171, 189, 9);
    }
    .bar1,.bar2,.bar3{
        width: 100%;
        height: 100%;
        background-color: rgb(59, 27, 136);
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="line col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="line1">line1</div>
            </div>
            <div class="line col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="line2">line2</div>
            </div>
            <div class="line col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="line3">line3</div>
            </div>
        
    
        
            <div class="bar col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="bar1">bar1</div>
            </div>
            <div class="bar col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="bar2">bar2</div>
            </div>
            <div class="bar col-md-4 col-sm-12 col-xs-12">
                <div draggable="true" class="bar3">bar3</div>
            </div>
        </div>
    </div>
    
        
    

    <p>nihaonihao </p>
    <br><br><br><br>

    <ul class="clearfix">
        <li class="col-md-3 col-sm-4 col-xs-6"><a href=""></a></li>
        <li class="col-md-3 col-sm-4 col-xs-6"><a href=""></a></li>
        <li class="col-md-3 col-sm-4 col-xs-6"><a href=""></a></li>
        <li class="col-md-3 col-sm-4 col-xs-6"><a href=""></a></li>
        <li class="col-md-3 col-sm-4 col-xs-6"><a href=""></a></li>
    </ul>
    <p>我是p标签</p>
    <br><br><br><br><br><br>

    <style>
        ul{
            border: 2px solid red;
            padding-left: 20px !important;
            padding-left: 20px;
        }
        li{
            list-style: none;
            height: 2.5rem;
            float: left;
            /* width: 25%; */
            padding-left: 0px !important;
            padding-right: 20px;
            border: 1px solid purple;
        }
        li a{
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgb(171, 189, 9);
        }
    </style>
    
    
    

    <script>
        var dragedDom,dropDom
        document.addEventListener("dragstart",function(event){
                dragedDom = event.target
                console.log(dragedDom)
        })

       // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
        document.addEventListener("dragover", function(event) {
            event.preventDefault();
        });

        document.addEventListener("drop", function(event) {
            dropDom = event.target
            
            var dragparent = dragedDom.parentNode
            var dropparent = dropDom.parentNode

            var dropDomAble = $(dropDom).prop("draggable")
            console.log("是否可以拖动："+dropDomAble)
            if(dropDomAble){
                var temp = document.createElement("div")
                dragparent.replaceChild(temp,dragedDom)
                dropparent.replaceChild(dragedDom,dropDom)
                dragparent.replaceChild(dropDom,temp)
            }
        });

    </script>



    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <!-- 以下是echart用的 -->
    <script type="text/javascript" src="../js/flexible.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</body>
</html>